/**
 * Created by admin on 2017/1/4.
 */
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';


@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    template: `
        <h1>Top Heroes</h1>
        <div class="dashboard_list">
        <!--[routerLink]="['/detail', hero.id]" -->
            <div *ngFor="let hero of heroes" class="dashboard_item" 
            (click)="onSelect(hero)">{{hero.name}}</div>
        </div>
    `,
    styles:[`
        .dashboard_list{
            display: flex;
        }
        .dashboard_item{
            display: inline-block;
            background: #deabd6;
            flex: 1 1 auto;
            height: 150px;
            line-height: 150px;
            color: #fff;
            margin: 0 5px;
            text-align: center;
            border-radius: 5px;
        }
        .dashboard_item:hover{
            background: #de86b7;
        }
    `]
})

export class DashboardComponent implements OnInit {
    ngOnInit(): void {
        this.getHeroes();
    }

    heroes: Hero[];

    constructor(
        private heroService: HeroService,
        private router:Router
    ) {
    }

    getHeroes(): void {
        this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes.slice(1, 5));
    }

    onSelect(hero:Hero):void{
        this.router.navigate(['/detail', hero.id]);
    }


}